import React from "react";
import { Search, Swiper, Grid, List } from "react-vant";
import { useFetchBanners } from "../../hooks/useFetchBanners";
import { useFetchLists } from "../../hooks/useFetchList";
import { useFetchMenus } from "../../hooks/useFetchMenus";
import { formatSellCount } from "../../utils/formatSellCount";
import { useNavigate } from "react-router-dom";
import { ListItem } from "../../component";
const Index: React.FC = () => {
  // 1. 获取 自定义 hooks
  const banners = useFetchBanners();
  const { lists, fetchLists, finished } = useFetchLists();
  const menus = useFetchMenus();
  // 获取 hooks
  const navigate = useNavigate();
  return (
    <div>
      {/* 头部搜索 */}
      <Search placeholder="请输入搜索的内容" onFocus={() => navigate('/search')}></Search>
      {/* 中间轮播 */}
      {banners.length && (
        <Swiper>
          {banners.map((v) => {
            return (
              <Swiper.Item key={v.id}>
                <img src={v.image} alt="" />
              </Swiper.Item>
            );
          })}
        </Swiper>
      )}
      {/* 中间导航 */}
      <Grid columnNum={5} border={false}>
        {menus.map((v) => {
          return (
            <Grid.Item
              key={v.id}
              icon={
                <img src={v.image} alt="" style={{ borderRadius: "50%" }}></img>
              }
              text={v.title}
            ></Grid.Item>
          );
        })}
      </Grid>

      {/* 列表 */}
      <List
        onLoad={fetchLists}
        finished={finished}
        finishedText="没有更多数据了"
      >
        <div className="list">
          {lists.map((v) => {
            return (
              <ListItem v={v} key={v.id} onClick={() => navigate('/detail/' + v.id)}></ListItem>
            );
          })}
        </div>
      </List>
    </div>
  );
};

export default Index;
